<template>
  <div class="projectSurvey project-report-detail">
    <van-form @submit="formSubmitted" ref="form">
      <van-field
        v-model="form.surveyNumber"
        name="surveyNumber"
        label="勘察编号"
        placeholder="保存后自动生成"
        v-show="form.surveyNumber"
        readonly
      />

      <van-field
        v-model="form.applicant"
        name="applicant"
        label="勘察人"
        placeholder="请输入勘察人"
        required
        :rules="[{ required:true,message:'请输入勘察人' }]"
        :disabled="!canEdit"
      />

      <van-field
        v-model="form.surveyDate"
        name="surveyDate"
        label="勘察日期"
        placeholder="请输入勘察日期"
        readonly
        required
        :rules="[{ required:true,message:'请输入勘察日期' }]"
        :disabled="!canEdit"
        @click="surveyDateClick"
      />

      <van-field
        v-model="form.projectType"
        name="projectType"
        label="项目类型"
        placeholder="请输入项目类型"
        :disabled="!canEdit"
      />

      <van-field
        v-model="form.construcUnit"
        name="construcUnit"
        label="建设单位"
        placeholder="请输入建设单位"
        :disabled="!canEdit"
      />

      <van-field
        v-model="form.participant"
        name="participant"
        label="参与人员"
        placeholder="请输入参与人员"
        :disabled="!canEdit"
      />

      <van-field
        v-model="form.surveyCase"
        name="surveyCase"
        label="勘察情况"
        placeholder="请输入勘察情况"
        type="textarea"
        required
        :rules="[{ required:true,message:'请输入勘察情况' }]"
        :disabled="!canEdit"
      />

      <van-field
        v-model="form.remark"
        name="remark"
        label="备注"
        placeholder="请输入备注"
        type="textarea"
        :disabled="!canEdit"
      />

      <van-field name="uploader" label="附件" :disabled="!canEdit">
        <template #input>
          <van-uploader
            v-model="fileList"
            :max-count="1"
            :disabled="!canEdit"
            :deletable="canEdit"
            :max-size="1024 * 1024 * 20"
            @delete="uploadDelete"
            @oversize="uploadOversize"
          />
          <van-button
            type="primary"
            native-type="button"
            :disabled="!canEdit || fileList.length != 1"
            @click="uploadClick"
          >开始上传</van-button>
        </template>
      </van-field>
    </van-form>

    <van-calendar
      ref="surveyDateCalendar"
      v-model="surveyDatePicker"
      :default-date="surveyDateDefaultDate"
      :min-date="minDate"
      :max-date="maxDate"
      @confirm="surveyDateConfirm"
    />

    <div style="margin: .3rem;" v-if="recordCanEdit">
      <van-row type="flex">
        <van-col class="bottomBtnCol" v-if="pageType == 1">
          <van-button
            round
            block
            type="default"
            native-type="button"
            @click="canEditBtnClick"
          >{{ canEdit?'取消':'编辑' }}</van-button>
        </van-col>
        <van-col class="bottomBtnCol">
          <van-button
            round
            block
            type="info"
            native-type="button"
            :disabled="!canEdit"
            @click="okBtnClick"
          >确定</van-button>
        </van-col>
      </van-row>
    </div>
  </div>
</template>

<script>
import { Form, Field, Calendar, Toast, Button, Uploader, Row, Col } from "vant";
import { mapActions, mapMutations } from "vuex";
import { formatDate } from "@/utils";
const formInited = {
  surveyNumber: "",
  applicant: "",
  surveyDate: "",
  projectType: "",
  construcUnit: "",
  participant: "",
  surveyCase: "",
  remark: "",
  showAttach: "",
  projectReportId: "",
};
export default {
  components: {
    [Form.name]: Form,
    [Field.name]: Field,
    [Calendar.name]: Calendar,
    [Button.name]: Button,
    [Uploader.name]: Uploader,
    [Row.name]: Row,
    [Col.name]: Col,
  },
  data() {
    return {
      form: JSON.parse(JSON.stringify(formInited)),
      detail: {},
      fileList: [],
      recordCanEdit: true,
      pageType: 0,
      canEdit: false,
      surveyDatePicker: false,
      surveyDateDefaultDate: new Date(),
      minDate: new Date("2000/01/01"),
      maxDate: new Date("2100/01/01"),
    };
  },
  created() {
    if (this.$route.query.type == "add") {
      this.pageType = 0;
      this.canEdit = true;
    } else {
      this.pageType = 1;
    }
  },
  mounted() {
    this.initData();
  },
  methods: {
    ...mapActions({
      uploadFile: "projectReport/uploadFile",
      projectServeyUpdate: "projectReport/projectServeyUpdate",
      projectServeyQuery: "projectReport/projectServeyQuery",
    }),
    initData() {
      let detail = this.$store.state.projectReport.projectReportDetail;
      if (this.pageType == 1 && (detail.delFlag || detail.approveStatus == 0)) {
        this.recordCanEdit = false;
      }
      this.detail = detail;
      this.projectServeyQuery({
        projectReportId: detail.id,
      })
        .then((res) => {
          console.log(res);
          if (res.success && res.data) {
            this.form = { ...this.form, ...res.data };
            if (res.data.showAttach) {
              this.fileList = [
                {
                  url: `http://14.23.82.211:7095/attachment/${res.data.showAttach}`,
                },
              ];
            }
            if (res.data.surveyDate) {
              this.form.surveyDate = formatDate(
                new Date(res.data.surveyDate),
                "yyyy-MM-dd"
              );
            }
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    canEditBtnClick() {
      this.canEdit = !this.canEdit;
    },
    okBtnClick() {
      this.$refs.form.submit();
    },
    surveyDateClick() {
      if (this.canEdit) {
        this.surveyDatePicker = true;
      }
    },
    surveyDateConfirm(date) {
      this.form.surveyDate = formatDate(date, "yyyy-MM-dd");
      this.surveyDatePicker = false;
    },
    uploadDelete(e) {
      console.log(e);
      this.form.showAttach = "";
    },
    uploadOversize() {
      Toast("文件大小不能超过20M");
    },
    uploadClick() {
      if (
        this.canEdit &&
        this.form.showAttach == "" &&
        this.fileList.length == 1
      ) {
        let fd = new FormData();
        fd.append("attach", this.fileList[0].file);
        this.uploadFile({
          fd: fd,
          params: {},
        })
          .then((res) => {
            console.log(res);
            if (res.success) {
              this.form.showAttach = res.data.url;
              Toast.success("上传成功");
            } else {
              Toast.fail("上传失败");
            }
          })
          .catch((err) => {
            console.log(err);
          });
      }
    },
    formSubmitted() {
      this.projectServeyUpdate({
        ...this.form,
        projectReportId: this.detail.id,
      })
        .then((res) => {
          console.log(res);
          if (res.success) {
            Toast.success("更新成功");
          } else {
            Toast.fail("更新失败");
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>

<style lang="scss">
.projectSurvey {
}
</style>